<?php
// Includes obligatorios
include ('./dbconfig.php');
/* include ('./administration/Libraries/Tools/JLTools.class.php');
  $jl = new JLTools(); */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="robots" content="no index, no follow" />
        <title>Galerie CSME</title>
        <script type="text/javascript" src="slider/javascripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="slider/javascripts/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/lib/xgallery-1.0.min.js"></script>

        <style type="text/css">
            body,td,th {
                font-family: Georgia, Times New Roman, Times, serif;
                font-size: 12px;
                color: #999;
            }
            body {
                margin:0;
            }
            img{border:0;}
            a{ text-decoration:none !important; }

            /* xGALLERY */
            .xGallery{ cursor:default; display:block; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; overflow:hidden; }
            .xGallery .viewer{ display:block; overflow:hidden;}
            .xGallery .viewer img{ display:none; visibility:hidden; border: 1px solid #D4D4D4; box-shadow: 0 0 5px 0 #E5E5E5 inset, 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 0 5px 0 #E5E5E5 inset, 0 1px 0 #FFFFFF; -moz-box-shadow: 0 0 5px 0 #E5E5E5 inset, 0 1px 0 #FFFFFF; padding: 8px; }
            .xGallery .thumbnails{ display:block; height:90px; overflow:hidden; }
            .xGallery .thumbnails .next,
            .xGallery .thumbnails .back{ position:absolute; width:15px; height:23px; cursor:pointer; margin-top:27px; background:url(images/arrow_back.png) no-repeat top left; }
            .xGallery .thumbnails .back:hover,
            .xGallery .thumbnails .next:hover{ background-position:left -23px;  }
            .xGallery .thumbnails .back:active{  }
            .xGallery .thumbnails .next{  background:url(images/arrow_next.png) left top no-repeat; }

            .xGallery .thumbnails .next:active{  }
            .xGallery .thumbnails .container_thumbs{ padding-top:18px; height:130px; }
            .xGallery .thumbnails .thumbs-content{ display:block; }
            .xGallery .thumbnails img{ color:#f8f8f8; overflow:hidden !important; filter:alpha(opacity=70); opacity: 0.7; -moz-opacity:0.7; -webkit-transition: all .4s ease-in; -moz-transition: all .4s ease-in; transition: all .4s ease-in; float:left; cursor:pointer; margin-right:3px; border:solid #9D9D9D 1px; padding:2px !important; box-shadow: 0 1px 0 white, 0 0 5px #E5E5E5 inset; -webkit-box-shadow: 0 1px 0 white, 0 0 5px #E5E5E5 inset; -moz-box-shadow: 0 1px 0 white, 0 0 5px #E5E5E5 inset; -ms-box-shadow: 0 1px 0 white, 0 0 5px #E5E5E5 inset; }
            .xGallery .thumbnails img:hover,
            .xGallery .thumbnails img.selected{ filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; }
            .xGallery .thumbnails img.selected{ border:solid #09F 1px; cursor:default; }
            .xGallery .loading{ font-size:28px; position:absolute; padding:0; margin:0; display:block;}
            .xGallery .loading span{ padding-right:1px; color:#555555; }
            .xGallery .loading .enabled{ color:#00A893; }
        </style>


    </head>
    <body>

        <?php
        $id = filter_var($_GET['id'], FILTER_VALIDATE_INT);
        $path = filter_var($_GET['path'], FILTER_SANITIZE_STRING);

        $SQL = "SELECT 
                  `int_id_image`,
                  `int_id_gallery`,
                  `var_name_image`,
                  `var_name_image_html`
                FROM 
                  `tbl_images`
                WHERE `int_id_gallery` = $id
                ORDER BY int_id_image ASC
                LIMIT 600";

        $res8 = mysql_query($SQL, $cnn); ?>

        <div id="gallery" class="xGallery">
            <div class="viewer"></div>
            <div class="thumbnails">
                <div class="thumbs-content">
                    <?php while ($row8 = mysql_fetch_assoc($res8)) : ?><img src="./galeries/<?php echo $path; ?>/thumb/<?php echo $row8['var_name_image']; ?>" alt="./galeries/<?php echo $path; ?>/view/<?php echo $row8['var_name_image']; ?>" width="36" height="36" /><?php endwhile; ?>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $(function(){
                $("#gallery").xGallery({width: 705,height: 445,easing: 'easeInOutExpo'});
            });
        </script>
    </body>
</html>
